<template>
  <div class="admin-list">
    <a-card>
      <div class="card-context">
        <div>
          <BarsOutlined /><span style="margin-left: 10px">数据列表</span>
        </div>
        <div>
          <a-button type="primary" @click="visibleModal = true">添加</a-button>
        </div>
      </div>
    </a-card>

    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      ellipsis
      rowKey="adminId"
      style="margin-top: 10px"
    >
      <template #adminName="{ record }">
        <div v-show="!(record.adminId == editAdminId)">
          {{ record.adminName }}
        </div>
        <a-input
          v-show="record.adminId == editAdminId"
          v-model:value="record.adminName"
        ></a-input>
      </template>
      <template #adminTel="{ record }">
        <div v-show="!(record.adminId == editAdminId)">
          {{ record.adminTel }}
        </div>
        <a-input
          v-show="record.adminId == editAdminId"
          v-model:value="record.adminTel"
        ></a-input>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button
            v-show="!(record.adminId == editAdminId)"
            @click="edit(record.adminId)"
            :disabled="record.adminId == 10000"
            >修改</a-button
          >
          <a-button
            v-show="record.adminId == editAdminId"
            @click="save(record)"
            :disabled="record.adminId == 10000"
            >保存</a-button
          >
          <a-button
            type="danger"
            :disabled="record.adminId == 10000"
            @click="adminDel(record.adminId)"
            >删除</a-button
          >
        </a-space>
      </template>
      <template #expandedRowRender="{ record }">
        <a-row>
          <a-col :span="2">角色</a-col>
          <a-col :span="10">
            <a-tag
              style="margin-top: 5px"
              color="success"
              v-for="item in record.sysRoles"
              :key="item.roleId"
              >{{ item.roleName }}</a-tag
            >
            <a-tag
              color="#87d068"
              v-if="record.adminId != 10000"
              @click="editRole(record)"
              ><a>修改</a></a-tag
            >
          </a-col>
        </a-row>
      </template>
    </a-table>
    <a-modal v-model:visible="visibleModal" title="添加管理员" @ok="addSubmit">
      <a-form
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        ref="addAdminForm"
        :rules="rules"
        :model="addAdminForm"
      >
        <a-form-item label="管理员姓名" name="adminName">
          <a-input
            placeholder="请输入管理员姓名"
            v-model:value="addAdminForm.adminName"
          />
        </a-form-item>
        <a-form-item label="电话" name="adminTel">
          <a-input
            placeholder="请输入电话"
            v-model:value="addAdminForm.adminTel"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      v-model:visible="visibleModalRole"
      title="修改角色"
      @ok="editRoleSubmit"
    >
      <a-form
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        ref="editRoleForm"
        :rules="rules"
        :model="editRoleForm"
      >
        <a-form-item label="角色" name="roles">
          <a-select
            placeholder=" 请选择角色"
            mode="tags"
            v-model:value="editRoleForm.roles"
          >
            <a-select-option
              :value="item.roleId"
              v-for="item in selectOption"
              :key="item.roleId"
            >
              {{ item.roleName }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    title: "管理员ID",
    dataIndex: "adminId",
    key: "adminId",
    align: "center",
  },
  {
    title: "管理员姓名",
    dataIndex: "adminName",
    key: "adminName",
    align: "center",
    slots: { customRender: "adminName" },
  },
  {
    title: "电话",
    dataIndex: "adminTel",
    key: "adminTel",
    align: "center",
    slots: { customRender: "adminTel" },
  },

  {
    title: "最后登录",
    dataIndex: "lastLoginTime",
    key: "lastLoginTime",
    align: "center",
  },
  {
    title: "创建时间",
    key: "createTime",
    dataIndex: "createTime",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];
const selectOption = [];

const data = [];

import { BarsOutlined, SearchOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

export default {
  components: {
    BarsOutlined,
    SearchOutlined,
  },
  data() {
    let tel = async (rule, value) => {
      if (value === "") {
        return Promise.reject("请输入手机号");
      } else if (
        !/^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/.test(
          value
        )
      ) {
        return Promise.reject("请输入正确的手机号");
      } else {
        return Promise.resolve();
      }
    };
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      data,
      columns,
      selectOption,
      visibleModal: false, //修改和添加的框
      visibleModalRole: false,
      editAdminId: "",

      rules: {
        roles: [
          {
            type: "array",
            required: true,
            message: "角色不能为空",
            trigger: "change",
          },
        ],
        adminName: [
          {
            required: true,
            message: "姓名名不能为空",
            trigger: "blur",
          },
        ],
        adminTel: [
          {
             required: true,
            validator: tel,
            trigger: "blur",
          },
        ],
      },
      editRoleForm: {
        roles: [],
        adminId: "",
      },
      addAdminForm: {
        adminName: "",
        adminTel: "",
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    edit(info) {
      this.editAdminId = info;
    },
    save(admin) {
      this.editAdminId = "";
      this.$axios
        .post("/admin/edit", {
          adminName: admin.adminName,
          adminTel: admin.adminTel,
          adminId: admin.adminId,
        })
        .then((res) => {
          if (res.data.code == 2000) {
            message.success("修改成功");
          } else if (res.data.code == 2001) {
            message.error(res.data.msg);
          } else {
            message.error("修改失败");
          }
        });
    },
    adminDel(adminId) {
      this.$axios.get("/admin/del?adminId=" + adminId).then((res) => {
        if (res.data.code == 2000) {
          message.success("删除成功");
          this.$axios.get("/admin/all").then((res) => {
            this.data = res.data.data;
          });
        } else {
          message.error("删除失败");
        }
      });
    },
    //提交 添加admin
    addSubmit() {
      this.$refs.addAdminForm
        .validate()
        .then(() => {
          this.$axios
            .post("/admin/add", {
              adminName: this.addAdminForm.adminName,
              adminTel: this.addAdminForm.adminTel,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("添加成功 初始密码为123456");
                this.getData();
                this.$refs.addAdminForm.resetFields();
              } else if (res.data.code == 2001) {
                message.error(res.data.msg);
              } else {
                message.error("添加失败");
              }
              this.visibleModal = false;
            });
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    //获取数据
    getData() {
      this.$axios.get("/admin/all").then((res) => {
        this.data = res.data.data;
      });
      this.$axios.get("/admin/adminRole").then((res) => {
        this.selectOption = res.data.data;
      });
    },
    //修改角色
    editRole(record) {
      this.editRoleForm.roles = [];
      this.editRoleForm.adminId=record.adminId
      for (let index = 0; index < record.sysRoles.length; index++) {
        const element = record.sysRoles[index];
        this.editRoleForm.roles.push(element.roleId);
      }

      this.visibleModalRole = true;
    },
    //修改角色的提交
    editRoleSubmit() {
    this.$refs.editRoleForm
        .validate()
        .then(() => {
          this.$axios
            .post("/admin/editRole", {
              roleIds: this.editRoleForm.roles,
              adminId: this.editRoleForm.adminId,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("修改成功");
                this.getData();
                this.$refs.editRoleForm.resetFields();
              } else {
                message.error("添加失败");
              }
              this.visibleModalRole = false;
            });
        })
        .catch((error) => {
          console.log("error", error);
        });

    },
  },
};
</script>

<style lang="less" scoped>
.admin-list {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.card-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-context > div:nth-child(1) {
  font-size: 20px;
}
</style>